<template>
  <div>
    <el-row style="height: 300px;">
      <div >
        <el-button type="success" @click="dialogFormVisible = true">新增收货地址</el-button>&nbsp;&nbsp;<span>你已创建{{result.length}}个收货地址</span>
      </div>
      <!-- 添加地址对话框 -->
      <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
        <el-form>
          <p>
            <span class="must">*</span><label>收货人姓名:</label>
            <el-input type="text" name="name" id="name" v-model="address.name" class="inputBox"/>
          </p>
          <p>
            &nbsp;&nbsp;&nbsp;<span class="must">*</span><label for="">手机号码:</label>
            <el-input type="text" name="phone" id="phone" v-model="address.phone" class="inputBox"/>
          </p>
          <p>
            &nbsp;&nbsp;&nbsp;<span class="must">*</span><label for="">所在地区:</label>
            <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange" class="inputBox"></el-cascader>
          </p>
          <p>
            &nbsp;&nbsp;&nbsp;<span class="must">*</span><label for="">详细地址:</label>
            <el-input type="text" name="deatilAddress" v-model="address.address" class="inputBox"/>
          </p>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false,aaa()">取 消</el-button>
          <el-button type="primary" @click="ok">确 定</el-button>
        </div>
      </el-dialog>
      <br>

      <!-- 修改地址对话框 -->
      <el-dialog title="收货地址" :visible.sync="dialogFormVisible1">
        <el-form>
          <p>
            <span class="must">*</span><label>收货人姓名:</label>
            <el-input type="text" name="name" id="name" v-model="address.name" class="inputBox"/>
          </p>
          <p>
            &nbsp;&nbsp;&nbsp;<span class="must">*</span><label for="">手机号码:</label>
            <el-input type="text" name="phone" id="phone" v-model="address.phone" class="inputBox"/>
          </p>
          <p>
            &nbsp;&nbsp;&nbsp;<span class="must">*</span><label for="">所在地区:</label>
            <el-cascader size="large" :options="options"  v-model="selectedOptions"  @change="handleChange" class="inputBox" :key="testKey"></el-cascader>
          </p>
          <p>
            &nbsp;&nbsp;&nbsp;<span class="must">*</span><label for="">详细地址:</label>
            <el-input type="text" name="address" v-model="address.address" class="inputBox" />
          </p>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false,aaa(),updateDate()">取 消</el-button>
          <el-button type="primary" @click="put">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 删除对话框 -->
      <el-dialog title="删除地址" :visible.sync="dialogFormVisible2">
        <h1 style="color:#E6A23C">确定要删除这个地址吗?</h1>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible2 = false,aaa()">取 消</el-button>
          <el-button type="primary" @click="del">确 定</el-button>
        </div>
      </el-dialog>
      <br>
      <!-- 地址显示 -->
       <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            fixed
            prop="name"
            label="收货人姓名"
            width="210">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="手机号"
            width="210">
          </el-table-column>
          <el-table-column
            prop="location"
            label="所在地区"
            width="410">
          </el-table-column>
          <el-table-column
            prop="address"
            label="详细地址"
            width="200">

          </el-table-column>
          <!-- <el-table-column
            prop="value"
            label="默认地址"
            width="200">


          </el-table-column> -->
          <!-- <el-table-column
            prop="address"
            label="地址"
            width="300">
          </el-table-column> -->
          <!-- <el-table-column
            prop="zip"
            label="邮编"
            width="120">
          </el-table-column> -->

          <el-table-column
            fixed="right"
            label="操作"
            width="130">
            <template slot-scope="scope">
              <el-button @click="update(scope.row)" type="text" size="small">编辑</el-button>
              <el-button type="text" size="small" @click="deleteAddress(scope.row)">删除</el-button>
              <br>
              <!-- 设为默认 -->
              <h3 v-if="scope.row.value">已为默认</h3>
              <h3 v-if="!scope.row.value">设为默认</h3>
              <el-switch
                v-model="scope.row.value"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @click.native="isdefault(scope.row)"
                >
              </el-switch>
            </template>
          </el-table-column>
        </el-table>
      <!-- <el-card class="box-card" v-for="(item,index) in result" :key="index">
        <div slot="header" class="clearfix"> -->
          <!-- <span>{{item.name}}设为默认收货地址</span> -->
          <!-- <el-button style="float: right; margin-right: 10px" type="text" @click="deleteAddress(index)">删除</el-button>
          <el-button style="float: right; margin-right: 20px" type="text" @click="update(index)">编辑</el-button> -->
          <!-- 做个表格吧 -->
        <!-- </div>
        <div class="text item">
          <p>收货人姓名：{{item.name}}</p>
          <p>所在地区：{{item.location}}</p>
          <p>地址：{{item.location}}{{item.address}}</p>
          <p>手机：{{item.phone}}</p>
        </div> -->
      <!-- </el-card> -->
      <br>
      <el-button type="success" @click="dialogFormVisible = true" v-if="hasAddress">新增收货地址</el-button>
    </el-row>
  </div>
</template>

<script>
  //引入省市区三级联动
  import { regionData } from 'element-china-area-data'
  //引入CodeToText，区域code转换为区域名
  import { CodeToText } from 'element-china-area-data'
  //引入TextToCode，去域名转换为区域code
  import {TextToCode} from 'element-china-area-data'
  export default{
    data(){
      return{
        address:{
          uid:0,
          name:"",
          phone:"",
          state:"",
          city:"",
          district:"",
          location:"",
          address:""
        },
        //默认按钮
        //value: false,
        //表格列表信息
        tableData: [],
        options:regionData,
        testKey:-1, //保证级联显示正确
        clickIndex:-1, //记录是哪个卡片被点击了
        selectedOptions:[],
        result:[],
        dialogFormVisible: false,
        dialogFormVisible1: false,
        dialogFormVisible2: false,
        hasAddress:false, //判断是否有地址,默认为false,查询到有就置为true
        formLabelWidth: '120px'
      }
    },
    methods:{
      aaa(){
        this.address={}
      },
      //将地址设为默认
      isdefault(row){
        //console.log(row)
        //修改新的默认把旧的默认状态改为不默认
        //如果已经是默认设为不默认
        if(row.value==0){
          this.$axios.put("http://localhost:8080/address/"+row.id).then(res=>{
          })
          this.updateDate()
        }else{
          this.$axios.put("http://localhost:8080/address/"+row.uid+"/"+row.id).then(res=>{
          })
          this.updateDate()
        }

        this.updateDate()
      },
      //修改
      handleClick(row) {
              console.log(row);
              this.value=row.value
            },
      handleChange(value){
        //console.log(value)
        //将区域code转换为区域名
        this.address.state = CodeToText[value[0]]
        this.address.city = CodeToText[value[1]]
        this.address.district = CodeToText[value[2]]
        //this.selectedOptions= this.address.state+this.address.city+this.address.district;
        this.address.location = this.address.state+this.address.city+this.address.district;
        console.log(value);
        console.log(this.address.location)
      },
      //添加地址
      ok:function(){
        //关闭对话框
        this.dialogFormVisible = false
        //发送请求
        this.$axios.post("http://localhost:8080/address",this.address).then(res=>{
          console.log(res.data)
          console.log(this.address)

        })
        this.updateDate()
      },
      //修改地址
      put:function(){
        this.address.location=this.address.state+this.address.city+this.address.district;
        //console.log(this.result[this.clickIndex])
        //console.log(this.address)
        //发送请求
        this.$axios.put("http://localhost:8080/address",this.address).then(res => {
                console.log(res)

                //修改完页面还没刷新，看后面怎么解决
        })
        this.updateDate()
        // this.$axios.put("http://localhost:8080/address/update",this.address).then(res=>{
        //   //判断是否修改成功
        //   if(res.data.status=="SUCCESS"){
        //     this.result[this.clickIndex].name = this.address.name
        //     this.result[this.clickIndex].phone = this.address.phone
        //     this.result[this.clickIndex].state = this.address.state
        //     this.result[this.clickIndex].city = this.address.city
        //     this.result[this.clickIndex].district = this.address.district
        //     this.result[this.clickIndex].address = this.address.address
        //   }
        //})
        //关闭对话框
        this.dialogFormVisible1 = false
      },
      //删除地址
      del:function(){
        //发送请求
        this.$axios.delete("http://localhost:8080/address/"+this.address.id).then(res=>{
          //判断是否删除成功
          // if(res.data.status=="SUCCESS"){
          //   //如果删除的是最后一个地址，则将底部的添加按钮隐藏
          //   if(this.clickIndex==0){
          //     this.result.splice(this.clickIndex,1)
          //     this.hasAddress = false
          //     /* this.$refs['flootAdd'].style.display=none */
          //   }
          //   this.result.splice(this.clickIndex,1)
          //   alert("删除成功")
          // }else{
          //   alert("删除失败")
          // }
          alert("删除成功")
        })
        this.updateDate()
        //关闭对话框
        this.dialogFormVisible2 = false
      },
      update:function(row){
      console.log(row)
      this.address = row
      //console.log(this.address)
      //this.selectedOptions[2] = TextToCode[this.address.location].code
      //console.log("selectedOptions:"+this.selectedOptions)
        //console.log(this.result[index])
        //打开对话框
        this.dialogFormVisible1 = true

        //将地址信息显示在对话框中
        // this.address.name = this.result[index].name
        // this.address.phone = this.result[index].phone
        // this.address.id = this.result[index].id
        // this.address.address = this.result[index].address
        console.log(TextToCode['河北省'].code);
        this.selectedOptions=[];
        this.selectedOptions[0] = TextToCode[this.address.state].code
        this.selectedOptions[1] = TextToCode[this.address.state][this.address.city].code
        this.selectedOptions[2] = TextToCode[this.address.state][this.address.city][this.address.district].code
        // console.log(this.address.address)
         this.testKey++

        // //记录编辑的是第几个地址
        // this.clickIndex = index

      },

      deleteAddress:function(row){
        console.log(row)
        //打开对话框
        this.dialogFormVisible2 = true
        this.address=row
        //记录删除的是第几个地址
        this.clickIndex = index
      },
      updateDate(){
        //从本地取出user对象
        this.user = JSON.parse(sessionStorage.getItem("user"))
        console.log(this.user)
        this.$axios.get("http://localhost:8080/sysuser/"+this.user.username).then(res => {
          console.log(res.data.data)
          this.user = res.data.data
          //console.log(this.users.id)
          var id = this.user.id
          console.log(id)
          this.$axios.get("http://localhost:8080/address/"+id).then(res => {
            console.log(res.data.data)
            this.tableData=res.data.data;
            this.result = res.data.data;
            this.address={},
            this.address.uid = id;
            this.hasAddress = true;
          })
        })
      }
    },
    mounted:function(){
      //根据用户id查询用户所有地址
      //this.$axios.get("http://localhost:8080/address/"+1).then(res=>{
        // if(res.data.status=="SUCCESS"){
        //   this.result = res.data.data;
        //   this.hasAddress = true;
        // }
        //把用户id配置上
          //console.log(res)
          //this.tableData=res.data.data;
          //this.address.uid = 1;
          //this.result = res.data.data;
          //this.hasAddress = true;
        //console.log(res)
      //})
      this.updateDate()

    }
  }
</script>

<style scoped>
  .text {
    font-size: 14px;
  }
  .must {
    color: red;
  }
  .inputBox {
    margin-left:5px;
    height: 30px;
    width:260px;
  }
  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
    margin-top: 10px;
    font-size: large;
  }
</style>
